<template>
	<view>
		<view class="box">
			<view class="">
				新号码
			</view>
			<input type="text" v-model="value"  placeholder="请输入新手机号码" placeholder-style="color:rgba(0, 0, 0, 0.1)" />
		</view>
		<!-- 验证码 -->
		<view class="flex align-center justify-between mt-1 p-3" >
			<view class="font-sm border-bottom flex py-2" style="width: 355rpx;">
				<input type="text" value=""  v-model="code" placeholder="请输入验证码" 	placeholder-style="font-size:28rpx;color:#CCCCCC;" />
				<view class="" ><view v-if="code" class="icon-guanbi iconfont text-light"></view></view>
			</view>
			<view class="text-light text-white px-2 py-1 aaa" :style="isActiveCode" @click="send()">{{ codeText }}</view>
		</view>
		
		<view class="btn">
			<button type="default" @click="save" :style="btnStyle">确认修改</button>
		</view>
	</view>
</template>

<script>
	import {validatePhone} from "@/common/js/validate.js"
	import {sms,alterPhoneNumber} from '@/apis/nurse/index.js'
	export default {
		data() {
			return {
				value:'',
				code: '', //输入的验证码
				codeText: '发送验证码', //验证码按钮显示内容
				sendCode: false, //是否点击了发送验证码
				countTimer: 60, //全局保存倒计时60s
			}
		},
		computed:{
			btnStyle(){
				if(this.value){
					return `background:#3c8eff`
				}
			},
			// 动态改变背景颜色
			isActiveCode() {
				if (this.countTimer == 60) {
					return `background-color: #3C8EFF;`
				} else {
					return `background: #ADCEFB;`
				}
			},
		},
		methods: {
			// 定时器倒计时
			countDownTime() {
				if (this.countTimer == 60) {
					var timer = setInterval(() => {
						if (this.countTimer > 55) {
							this.countTimer--;
							this.codeText = '重新发送' + this.countTimer + 's';
						} else {
							this.codeText = '发送验证码';
							clearInterval(timer);
							this.countTimer = 60;
						}
					}, 1000);
				}
			},
			// 发送验证码
			async send() {
				// 如果还在计时器时间内就无法点击
				if (this.countTimer < 60) {
					plus.nativeUI.toast('同一手机号请求间距不能少于60秒')
					// uni.showToast({
					// 	title: '同一手机号请求间距不能少于60秒',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					return;
				}else{
					if(validatePhone(this.value)){
						let data = {
							mobile:this.value,
							type:1
						}
						console.log(data,'00000000000000000000')
						let res =await sms(data)
						if(res.success){
							this.countDownTime()
						}else{
							
						}
						console.log(res,'获取验证码')
						// console.log(res,'修改手机号')
					}else{
						plus.nativeUI.toast('请输入正确的手机号码!')
						// uni.showToast({
						// 	icon:'none',
						// 	title:'请输入正确的手机号码！'
						// })
					}
				}
			},
			async save(){
				let res =await alterPhoneNumber({code:this.code,mobile:this.value})
				if(res.success){
					plus.nativeUI.toast('修改成功!')
					// uni.showToast({
					// 	icon:'success',
					// 	title:'修改成功！'
					// })
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						},500)
					})
				}
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.box{
		width: 698rpx;
		height: 108rpx;
		border-bottom: 1rpx solid  rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.87);
	}
	.box input{
		margin-left: 42rpx;
	}
	.btn{
		width: 750rpx;
		height: 144rpx;
		background: rgba(216, 216, 216, 0);
		position: fixed;
		bottom: 0;
		left: 0;
		margin-top: 108rpx;
		line-height: 144rpx;
		text-align: center;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
	}
	.btn button{
		width: 698rpx;
		height: 96rpx;
		background: #3C8EFF;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color:#FFFFFF;
		line-height: 96rpx;
		// text-align: center;
	}
</style>
